import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, Typography, Row, Col, Button, Space, Statistic, Divider, List, Avatar } from 'antd';
import React from 'react';
import {
  RobotOutlined,
  CodeOutlined,
  BulbOutlined,
  CommentOutlined,
  ThunderboltOutlined,
  SafetyOutlined,
  CloudServerOutlined,
  TeamOutlined
} from '@ant-design/icons';
import { history } from '@umijs/max';
import styles from './Welcome.less';

const { Title, Paragraph, Text } = Typography;

/**
 * 功能卡片组件
 */
const FeatureCard: React.FC<{
  icon: React.ReactNode;
  title: string;
  description: string;
}> = ({ icon, title, description }) => {
  return (
    <Card className={styles.featureCard} bordered={false}>
      <div className={styles.featureIcon}>{icon}</div>
      <Title level={4} className={styles.featureTitle}>{title}</Title>
      <Paragraph className={styles.featureDesc}>{description}</Paragraph>
    </Card>
  );
};

/**
 * 使用场景组件
 */
const UseCase: React.FC<{
  avatar: React.ReactNode;
  title: string;
  description: string;
}> = ({ avatar, title, description }) => {
  return (
    <List.Item className={styles.useCaseItem}>
      <List.Item.Meta
        avatar={<Avatar size={48} icon={avatar} className={styles.useCaseAvatar} />}
        title={<Text strong>{title}</Text>}
        description={description}
      />
    </List.Item>
  );
};

const Welcome: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const currentUser = initialState?.currentUser;

  const handleStartChat = () => {
    history.push('/chat');
  };

  return (
    <PageContainer className={styles.welcomeContainer} header={{ title: '' }}>
      {/* 顶部横幅 */}
      <div className={styles.hero}>
        <div className={styles.heroContent}>
          <Title className={styles.heroTitle}>
            智能AI代理平台 <span className={styles.highlight}>赋能</span>您的创新
          </Title>
          <Paragraph className={styles.heroDesc}>
            多模型融合、多场景支持、多媒体交互，构建专属您的AI助手生态
          </Paragraph>
          <Space size="large">
            <Button type="primary" size="large" icon={<RobotOutlined />} onClick={handleStartChat}>
              开始聊天
            </Button>
            <Button size="large" icon={<CodeOutlined />} onClick={() => history.push('/documents')}>
              查看文档
            </Button>
          </Space>
        </div>
        <div className={styles.heroImage}>
          {/* 可以替换为真实的平台界面图或AI相关的图像 */}
        </div>
      </div>

      {/* 平台数据统计 */}
      <div className={styles.statsSection}>
        <Row gutter={48}>
          <Col span={6}>
            <Statistic title="支持的大模型" value={12} prefix={<RobotOutlined />} />
          </Col>
          <Col span={6}>
            <Statistic title="活跃用户" value={5000} prefix={<TeamOutlined />} />
          </Col>
          <Col span={6}>
            <Statistic title="每日对话" value={50000} prefix={<CommentOutlined />} />
          </Col>
          <Col span={6}>
            <Statistic title="成功案例" value={200} prefix={<BulbOutlined />} />
          </Col>
        </Row>
      </div>

      <Divider />

      {/* 主要功能 */}
      <div className={styles.featuresSection}>
        <Title level={2} className={styles.sectionTitle}>平台核心功能</Title>
        <Row gutter={[24, 24]}>
          <Col xs={24} sm={12} md={8}>
            <FeatureCard
              icon={<RobotOutlined />}
              title="多模型融合"
              description="支持Claude、GPT-4、Deepseek、Llama等多种顶尖大语言模型，为您提供最适合的智能解决方案。"
            />
          </Col>
          <Col xs={24} sm={12} md={8}>
            <FeatureCard
              icon={<ThunderboltOutlined />}
              title="超高性能"
              description="优化的推理引擎和分布式架构，保证即使在高负载下也能提供毫秒级响应，满足企业级应用需求。"
            />
          </Col>
          <Col xs={24} sm={12} md={8}>
            <FeatureCard
              icon={<SafetyOutlined />}
              title="数据安全"
              description="企业级数据安全保障，支持私有部署，确保您的敏感信息不会泄露，满足合规要求。"
            />
          </Col>
          <Col xs={24} sm={12} md={8}>
            <FeatureCard
              icon={<CloudServerOutlined />}
              title="知识库增强"
              description="轻松连接您的企业知识库，让AI回答更加精准，帮助团队提高决策效率和知识传承。"
            />
          </Col>
          <Col xs={24} sm={12} md={8}>
            <FeatureCard
              icon={<CodeOutlined />}
              title="代码助手"
              description="专业的编程辅助功能，支持多种编程语言，代码解释、生成、优化一步到位。"
            />
          </Col>
          <Col xs={24} sm={12} md={8}>
            <FeatureCard
              icon={<BulbOutlined />}
              title="思考过程可视化"
              description="透明展示AI的思考路径，理解决策逻辑，提高AI可解释性和用户信任度。"
            />
          </Col>
        </Row>
      </div>

      <Divider />

      {/* 使用场景 */}
      <div className={styles.useCasesSection}>
        <Title level={2} className={styles.sectionTitle}>广泛的应用场景</Title>
        <List
          grid={{ gutter: 16, column: 2 }}
          dataSource={[
            {
              avatar: <TeamOutlined />,
              title: "企业知识管理",
              description: "将企业内部文档、规章制度与AI结合，新员工可快速获取信息，老员工高效检索专业知识。"
            },
            {
              avatar: <CodeOutlined />,
              title: "研发效能提升",
              description: "为开发团队提供智能代码生成、审查和优化，显著减少bug，加快迭代速度。"
            },
            {
              avatar: <CommentOutlined />,
              title: "智能客服",
              description: "24/7全天候服务，精准理解客户需求，大幅提升客户满意度和服务效率。"
            },
            {
              avatar: <BulbOutlined />,
              title: "创意与内容生成",
              description: "辅助营销团队生成高质量文案、设计创意和营销方案，激发创新灵感。"
            }
          ]}
          renderItem={(item) => (
            <UseCase
              avatar={item.avatar}
              title={item.title}
              description={item.description}
            />
          )}
        />
      </div>

      {/* 欢迎使用 */}
      <div className={styles.welcomeUser}>
        <Title level={3}>
          {currentUser?.username ? `${currentUser.username}，欢迎使用AI代理平台` : '立即加入我们，体验智能革命'}
        </Title>
        <Button type="primary" size="large" onClick={handleStartChat}>
          开始使用
        </Button>
      </div>
    </PageContainer>
  );
};

export default Welcome;
